<script lang="ts">
import { defineComponent } from "vue";

import ListOrderBase from "./list-order-base.vue";

export default defineComponent({
  components: { ListOrderBase },
  props: {
    info: { type: Object, required: true },
  },
  emits: {
    "btn-click": (type: string) => typeof type === "string",
  },
  setup(props, ctx) {
    const btnClick = (type: string) => {
      ctx.emit("btn-click", type);
    };
    return { btnClick };
  },
});
</script>

<template>
  <ListOrderBase :info="info">
    <view class="order-item">
      <view class="order-item-footer" v-if="info.pay_status === 0">
        <view class="order-item-operate">
          <view class="order-item-tip">请30分钟内完成支付</view>
          <view class="order-item-btn" @click.stop="btnClick('pay')">
            去支付
          </view>
        </view>
      </view>
      <template v-else-if="info.pay_status === 1">
        <!-- 金牌说、文博 -->
        <view
          class="order-item-footer"
          v-if="info.order_list_type === 5 || info.order_list_type === 6"
        >
          <view class="order-item-operate">
            <template v-if="info.travel_status === 2">
              <view class="order-item-state2">
                <image
                  class="order-item-state3"
                  src="@/package/my/static/order-list-state2.png"
                />
                进行中
              </view>
              <!-- <view class="order-item-btn" @click.stop="btnClick('trip')">
                行程明细
              </view> -->
            </template>
            <template v-else-if="info.travel_status === 3">
              <!-- <view class="order-item-btn" @click.stop="btnClick('trip')">
                  行程明细
                </view> -->
              <!-- <view
                :class="
                  info.order_travel_status === 4
                    ? 'order-item-btn4'
                    : 'order-item-btn3'
                "
                @click.stop="btnClick('comment')"
              >
                {{ info.order_travel_status === 4 ? "已评价" : "去评价" }}
              </view> -->
            </template>
            <template v-else>
              <view class="order-item-btn5" v-if="info.refund_status === 1">
                退款中
              </view>
              <template v-else>
                <view class="order-item-state2">
                  <image
                    class="order-item-state3"
                    src="@/package/my/static/order-list-state.png"
                  />
                  待出发
                </view>
                <!-- <view class="order-item-btn" @click.stop="btnClick('trip')">
                  行程明细
                </view> -->
                <!-- <view
                  class="order-item-btn2"
                  v-if="info.is_show_refund_button === 1"
                  @click.stop="btnClick('refund')"
                >
                  申请退款
                </view> -->
              </template>
            </template>
          </view>
        </view>
        <!-- 商品 -->
        <view class="order-item-footer" v-if="info.order_list_type === 1">
          <view class="order-item-operate">
            <view class="order-item-btn5" v-if="info.refund_status === 1">
              退款中
            </view>
            <template v-else>
              <!-- <view
                class="order-item-btn2"
                v-if="info.is_show_refund_button === 1"
                @click.stop="btnClick('refund')"
              >
                申请退款
              </view> -->
              <view
                class="order-item-btn6"
                v-if="info.ship_status === 20"
                @click.stop="btnClick('receive')"
              >
                确认收货
              </view>
              <template v-else-if="info.ship_status === 30">
                <!-- <view
                  :class="
                    info.is_comment === 1
                      ? 'order-item-btn4'
                      : 'order-item-btn3'
                  "
                  @click.stop="btnClick('comment')"
                >
                  {{ info.is_comment === 1 ? "已评价" : "去评价" }}
                </view> -->
                <!-- 讲解包显示查看景区按钮，跳转全球版 -->
                <view
                  class="order-item-btn"
                  v-if="info.product_type === 8"
                  @click.stop="btnClick('explain')"
                >
                  去导览
                </view>
              </template>
            </template>
          </view>
          <view
            class="order-item-express"
            v-if="info.refund_status !== 1 && info.ship_status === 20"
          >
            <view class="order-item-express2">
              {{ info.express_name }} {{ info.express_out_trade_no }}
            </view>
            <view class="order-item-express3" @click.stop="btnClick('copy')">
              复制单号
            </view>
          </view>
        </view>
        <!-- 课程 -->
        <!-- <view
          class="order-item-footer"
          v-else-if="info.order_list_type === 3 && info.has_groupon === 1"
        >
          <view class="order-item-operate">
            <view
              :class="
                info.is_comment === 1 ? 'order-item-btn4' : 'order-item-btn3'
              "
              @click.stop="btnClick('comment')"
            >
              {{ info.is_comment === 1 ? "已评价" : "去评价" }}
            </view>
          </view>
        </view> -->
      </template>
      <view
        class="order-item-footer"
        v-else-if="
          info.order_list_type === 1 ||
          info.order_list_type === 5 ||
          info.order_list_type === 6
        "
      >
        <!-- 商品、金牌说、文博 -->
        <view class="order-item-operate">
          <view class="order-item-btn4" v-if="info.pay_status === 3">
            已退款
          </view>
          <view class="order-item-btn" @click.stop="btnClick('again')">
            再次购买
          </view>
        </view>
      </view>
    </view>
  </ListOrderBase>
</template>

<style lang="scss">
.order-item {
  .order-item-footer {
    padding: 28rpx 20rpx 30rpx;
    border-top: 2rpx solid #eeeeee;
  }

  .order-item-operate {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .order-item-tip {
    font-size: 24rpx;
    color: #666666;
  }

  .order-item-btn,
  .order-item-btn2,
  .order-item-btn3,
  .order-item-btn4,
  .order-item-btn5,
  .order-item-btn6 {
    width: 142rpx;
    margin-left: 20rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    border-radius: 30rpx;
    border: 2rpx solid #ff7900;
    background-color: #ff7900;
  }

  .order-item-btn2 {
    color: #ff4d4f;
    border-color: rgba(255, 77, 79, 0.05);
    background-color: rgba(255, 77, 79, 0.05);
  }

  .order-item-btn3 {
    color: #ff7900;
    border-color: rgba(255, 121, 0, 0.05);
    background-color: rgba(255, 121, 0, 0.05);
  }

  .order-item-btn4 {
    color: #999999;
    border-color: #eeeeee;
    background-color: #eeeeee;
  }

  .order-item-btn5 {
    color: #ff4d4f;
    border-color: #ff4d4f;
    background-color: #ffffff;
  }

  .order-item-btn6 {
    color: #ff7900;
    border-color: #ff7900;
    background-color: #ffffff;
  }

  .order-item-state2 {
    display: flex;
    align-items: center;
    height: 56rpx;
    padding: 0 20rpx;
    margin-right: auto;
    font-size: 24rpx;
    color: #666666;
    line-height: 32rpx;
    border-radius: 30rpx;
    background-color: rgba(41, 90, 224, 0.05);
  }

  .order-item-state3 {
    width: 24rpx;
    height: 24rpx;
    margin-right: 6rpx;
  }

  .order-item-express {
    display: flex;
    align-items: center;
    padding: 12rpx 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #f5f5f5;
  }

  .order-item-express2 {
    flex-grow: 1;
    min-width: 0;
    font-size: 22rpx;
    color: #999999;
    line-height: 32rpx;
  }

  .order-item-express3 {
    flex-shrink: 0;
    margin-left: 20rpx;
    font-size: 22rpx;
    color: #fa6731;
    line-height: 32rpx;
  }
}
</style>